<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人力资源管理系统 - 分析报表</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#64748b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 引入公共CSS -->
  <link rel="stylesheet" href="css/common.css">

  <!-- 引入API和公共JS -->
  <script src="js/api.js"></script>
  <script src="js/common.js"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <div id="app" class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block transition-all duration-300">
      <div class="p-5 border-b border-gray-200">
        <h1 class="text-xl font-bold text-primary">人力资源管理系统</h1>
      </div>

      <nav class="p-3">
        <ul>
          <li>
            <a href="index.html" class="sidebar-item">
              <i class="fa fa-dashboard"></i>
              <span>仪表盘</span>
            </a>
          </li>
          <li>
            <a href="projects.html" class="sidebar-item">
              <i class="fa fa-briefcase"></i>
              <span>项目中心</span>
            </a>
          </li>
          <li>
            <a href="talents.html" class="sidebar-item">
              <i class="fa fa-users"></i>
              <span>人才库</span>
            </a>
          </li>
          <li>
            <a href="tasks.html" class="sidebar-item">
              <i class="fa fa-tasks"></i>
              <span>任务管理</span>
            </a>
          </li>
          <li>
            <a href="reports.html" class="sidebar-item active">
              <i class="fa fa-bar-chart"></i>
              <span>分析报表</span>
            </a>
          </li>
        </ul>
      </nav>

      <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
        <div class="flex items-center gap-3">
          <img id="userAvatar" src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p id="user" class="font-medium text-sm">张三</p>
            <p id="userRole" class="text-xs text-gray-500">项目经理</p>
          </div>
          <button id="logoutBtn" class="ml-auto text-gray-500 hover:text-danger">
            <i class="fa fa-sign-out"></i>
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
        <div class="flex items-center">
          <button id="sidebarToggle" class="md:hidden mr-4 text-gray-500">
            <i class="fa fa-bars text-xl"></i>
          </button>
          <h2 id="pageTitle" class="text-lg font-semibold">分析报表</h2>
        </div>

        <div class="flex items-center gap-4">
          <div class="relative">
            <input type="text" placeholder="搜索..." id="globalSearch" class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-64">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>

          <button id="notificationBtn" class="relative text-gray-500 hover:text-primary">
            <i class="fa fa-bell text-xl"></i>
            <span id="notificationCount" class="absolute -top-1 -right-1 bg-danger text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">3</span>
          </button>
        </div>
      </header>

      <!-- 页面内容 -->
      <div class="flex-1 overflow-y-auto p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-lg font-semibold">数据分析</h3>
          <div class="flex gap-2">
            <button class="btn btn-primary text-sm">本周</button>
            <button class="btn btn-secondary text-sm">本月</button>
            <button class="btn btn-secondary text-sm">全年</button>
          </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <!-- 项目完成率图表 -->
          <div class="card">
            <h3 class="text-lg font-semibold mb-4">项目完成率</h3>
            <div class="h-80">
              <canvas id="projectCompletionChart"></canvas>
            </div>
          </div>

          <!-- 人员利用率图表 -->
          <div class="card">
            <h3 class="text-lg font-semibold mb-4">人员利用率</h3>
            <div class="h-80">
              <canvas id="resourceUtilizationChart"></canvas>
            </div>
          </div>
        </div>

        <div class="card mb-6">
          <h3 class="text-lg font-semibold mb-4">技能分布</h3>
          <div class="h-80">
            <canvas id="skillDistributionChart"></canvas>
          </div>
        </div>

        <div class="card">
          <h3 class="text-lg font-semibold mb-4">任务完成趋势</h3>
          <div class="h-80">
            <canvas id="taskCompletionTrendChart"></canvas>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    // 分析报表页面特定JS
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化所有图表
      initCharts();

      // 时间范围按钮事件
      const timeRangeButtons = document.querySelectorAll('.btn');
      timeRangeButtons.forEach(button => {
        button.addEventListener('click', function() {
          // 移除所有按钮的active类
          timeRangeButtons.forEach(btn => btn.classList.remove('btn-primary', 'bg-gradient-to-r', 'from-blue-500', 'to-indigo-600'));
          // 为当前按钮添加active类
          this.classList.add('btn-primary', 'bg-gradient-to-r', 'from-blue-500', 'to-indigo-600');

          // 根据按钮文本获取时间范围
          const period = this.textContent.trim();
          // 重新加载图表数据
          initCharts(period);
        });
      });
    });

    // 初始化所有图表
    function initCharts(period = '本周') {
      showLoading();

      // 并行加载所有报表数据
      Promise.all([
        api.getProjectCompletion(),
        api.getResourceUtilization(),
        api.getSkillDistribution(),
        api.getTaskCompletionTrend(period)
      ])
      .then(([projectCompletionData, resourceUtilizationData, skillDistributionData, taskCompletionTrendData]) => {
        // 渲染项目完成率图表
        renderProjectCompletionChart(projectCompletionData);

        // 渲染人员利用率图表
        renderResourceUtilizationChart(resourceUtilizationData);

        // 渲染技能分布图表
        renderSkillDistributionChart(skillDistributionData);

        // 渲染任务完成趋势图表
        renderTaskCompletionTrendChart(taskCompletionTrendData);

        hideLoading();
      })
      .catch(error => {
        console.error('加载报表数据失败:', error);
        hideLoading();
        showToast('加载报表数据失败，请重试', 'error');
      });
    }

    // 渲染项目完成率图表
    function renderProjectCompletionChart(data) {
      const projectCompletionCtx = document.getElementById('projectCompletionChart').getContext('2d');
      
      // 销毁已存在的图表
      if (window.projectCompletionChart) {
        window.projectCompletionChart.destroy();
      }

      window.projectCompletionChart = new Chart(projectCompletionCtx, {
        type: 'doughnut',
        data: {
          labels: ['已完成', '进行中', '未开始'],
          datasets: [{
            data: [data.completed || 0, data.inProgress || 0, data.notStarted || 0],
            backgroundColor: [
              'rgba(16, 185, 129, 0.6)',
              'rgba(37, 99, 235, 0.6)',
              'rgba(100, 116, 139, 0.6)'
            ],
            borderColor: [
              'rgba(16, 185, 129, 1)',
              'rgba(37, 99, 235, 1)',
              'rgba(100, 116, 139, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          }
        }
      });
    }

    // 渲染人员利用率图表
    function renderResourceUtilizationChart(data) {
      const resourceUtilizationCtx = document.getElementById('resourceUtilizationChart').getContext('2d');

      // 销毁已存在的图表
      if (window.resourceUtilizationChart) {
        window.resourceUtilizationChart.destroy();
      }

      // 提取标签和数据
      const labels = data.map(item => item.name);
      const utilizationData = data.map(item => item.utilizationRate);

      window.resourceUtilizationChart = new Chart(resourceUtilizationCtx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: '已分配任务占比 (%)',
            data: utilizationData,
            backgroundColor: 'rgba(37, 99, 235, 0.6)',
            borderColor: 'rgba(37, 99, 235, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              max: 100
            }
          }
        }
      });
    }

    // 渲染技能分布图表
    function renderSkillDistributionChart(data) {
      const skillDistributionCtx = document.getElementById('skillDistributionChart').getContext('2d');

      // 销毁已存在的图表
      if (window.skillDistributionChart) {
        window.skillDistributionChart.destroy();
      }

      // 提取标签和数据
      const labels = data.map(item => item.name);
      const skillData = data.map(item => item.count);

      window.skillDistributionChart = new Chart(skillDistributionCtx, {
        type: 'polarArea',
        data: {
          labels: labels,
          datasets: [{
            data: skillData,
            backgroundColor: [
              'rgba(37, 99, 235, 0.6)',
              'rgba(16, 185, 129, 0.6)',
              'rgba(245, 158, 11, 0.6)',
              'rgba(239, 68, 68, 0.6)',
              'rgba(100, 116, 139, 0.6)',
              'rgba(139, 92, 246, 0.6)',
              'rgba(236, 72, 153, 0.6)'
            ],
            borderColor: [
              'rgba(37, 99, 235, 1)',
              'rgba(16, 185, 129, 1)',
              'rgba(245, 158, 11, 1)',
              'rgba(239, 68, 68, 1)',
              'rgba(100, 116, 139, 1)',
              'rgba(139, 92, 246, 1)',
              'rgba(236, 72, 153, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    }

    // 渲染任务完成趋势图表
    function renderTaskCompletionTrendChart(data) {
      const taskCompletionTrendCtx = document.getElementById('taskCompletionTrendChart').getContext('2d');

      // 销毁已存在的图表
      if (window.taskCompletionTrendChart) {
        window.taskCompletionTrendChart.destroy();
      }

      // 提取标签和数据
      const labels = data.map(item => item.period);
      const completedData = data.map(item => item.completed);
      const pendingData = data.map(item => item.pending);

      window.taskCompletionTrendChart = new Chart(taskCompletionTrendCtx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
            label: '已完成任务',
            data: completedData,
            fill: false,
            backgroundColor: 'rgba(16, 185, 129, 0.6)',
            borderColor: 'rgba(16, 185, 129, 1)',
            borderWidth: 2,
            tension: 0.1
          }, {
            label: '未完成任务',
            data: pendingData,
            fill: false,
            backgroundColor: 'rgba(239, 68, 68, 0.6)',
            borderColor: 'rgba(239, 68, 68, 1)',
            borderWidth: 2,
            tension: 0.1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  </script>
</body>
</html>